// render.js - 页面渲染逻辑
const Render = {
    // 渲染个人信息
    renderUserInfo(userInfo) {
        document.getElementById('username').textContent = userInfo.username;
        document.getElementById('signature').textContent = userInfo.signature;

        // 渲染个人资料列表
        const infoList = document.getElementById('infoList');
        userInfo.info.forEach(item => {
            const li = document.createElement('li');
            li.innerHTML = `<span>${item.label}：</span><span>${item.value}</span>`;
            infoList.appendChild(li);
        });

        // 渲染联系方式
        const contactList = document.getElementById('contactList');
        userInfo.contact.forEach(item => {
            const li = document.createElement('li');
            li.innerHTML = `<span>${item.label}：</span><span>${item.value}</span>`;
            contactList.appendChild(li);
        });

        // 渲染统计数据
        const statsGrid = document.getElementById('statsGrid');
        const stats = [
            {num: userInfo.stats.visitors, text: '访客'},
            {num: userInfo.stats.dynamics, text: '动态'},
            {num: userInfo.stats.albums, text: '相册'},
            {num: userInfo.stats.blogs, text: '日志'},
            {num: userInfo.stats.messages, text: '留言'},
            {num: '128', text: '好友'}
        ];
        stats.forEach(item => {
            const div = document.createElement('div');
            div.className = 'stats-item';
            div.innerHTML = `<div class="num">${item.num}</div><div class="text">${item.text}</div>`;
            statsGrid.appendChild(div);
        });
    },

    // 渲染动态列表
    renderDynamics(dynamics) {
        const dynamicList = document.getElementById('dynamicList');
        dynamics.forEach(dynamic => {
            const div = document.createElement('div');
            div.className = 'dynamic-item';
            
            // 媒体内容（图片/视频）
            let mediaHtml = '';
            if (dynamic.media) {
                if (dynamic.media.endsWith('.mp4')) {
                    mediaHtml = `<video class="dynamic-media" controls><source src="${dynamic.media}" type="video/mp4"></video>`;
                } else {
                    mediaHtml = `<img class="dynamic-media" src="${dynamic.media}" alt="动态图片">`;
                }
            }

            div.innerHTML = `
                <div class="dynamic-header">
                    <img src="./assets/images/avatar.jpg" class="dynamic-avatar" alt="头像">
                    <span class="dynamic-name">大学生小李</span>
                    <span class="dynamic-time">${dynamic.time}</span>
                </div>
                <div class="dynamic-content">${dynamic.content}</div>
                ${mediaHtml}
                <div class="dynamic-ops">
                    <button class="ops-btn"><i class="iconfont icon-like"></i> 点赞(${dynamic.like})</button>
                    <button class="ops-btn"><i class="iconfont icon-comment"></i> 评论(${dynamic.comment})</button>
                    <button class="ops-btn"><i class="iconfont icon-share"></i> 分享</button>
                </div>
            `;
            dynamicList.appendChild(div);
        });
    },

    // 渲染相册
    renderAlbums(albums) {
        const albumGrid = document.getElementById('albumGrid');
        albums.forEach(album => {
            const div = document.createElement('div');
            div.className = 'album-item';
            div.innerHTML = `
                <img src="${album.cover}" alt="${album.name}">
                <div class="count">${album.count}张</div>
            `;
            albumGrid.appendChild(div);
        });
    },

    // 渲染日志
    renderBlogs(blogs) {
        const blogList = document.getElementById('blogList');
        blogs.forEach(blog => {
            const div = document.createElement('div');
            div.className = 'blog-item';
            div.innerHTML = `
                <div class="blog-title">${blog.title}</div>
                <div class="blog-meta">
                    <span><i class="iconfont icon-time"></i> ${blog.time}</span>
                    <span><i class="iconfont icon-read"></i> 阅读${blog.read}</span>
                    <span><i class="iconfont icon-comment"></i> 评论${blog.comment}</span>
                </div>
            `;
            blogList.appendChild(div);
        });
    }
};